<style scoped lang="scss">
.chat-con{
  display: flex;
  flex-direction: column;

  & > view{
    &:nth-child(1){
      flex: 1;
      overflow: hidden;
    }
    &:nth-child(2){
      margin: 32rpx 40rpx;
      display: flex;
      border-radius: 40rpx;
      background: #FFFFFF;
      border: 1rpx solid #567AED;
      padding-left: 30rpx;
      padding-right: 30rpx;

      & > view{
        &:nth-child(1){
          flex: 1;
          textarea{
            padding-top: 20rpx;
            padding-bottom: 20rpx;
            width: 100%;
          }
        }
        &:nth-child(2){
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 10rpx;
          text{
            color: #AABCF6;
            font-size: 38rpx;
          }
        }
      }
    }
  }
}


.group-btn{
  font-size: 36rpx;
  color: #101012;
}

.cate-con{
  padding: 25rpx;

  & > view{
    &:nth-child(1){
      height: 96rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      border: 1rpx solid #D4D4D4;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #101012;
    }
    &:nth-child(2){
      margin-top: 30rpx;
      & > view{
        display: flex;
        height: 76rpx;
        border-radius: 10rpx;
        border: 1rpx solid #D4D4D4;
        align-items: center;
        padding-left: 22rpx;
        padding-right: 20rpx;
        margin-bottom: 20rpx;

        &.active{
          background: #F8FAFF;
          border: 1rpx solid #577BED;
          color: #577BED;
        }

        & > view{
          &:nth-child(1){
            text{
              font-size: 28rpx;
            }
          }
          &:nth-child(2){
            @include textOverflow();
            flex: 1;
            margin-left: 14rpx;
            margin-right: 14rpx;
          }
          &:nth-child(3){
            text{
              font-size: 26rpx;
            }
          }
        }
      }
    }
  }
}

.add-cate-inp{
  padding: 40rpx 30rpx;

  input{
    height: 84rpx;
    line-height: 84rpx;
    background: #F6F6F6;
    border-radius: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
  }
}
</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head>
        <view slot="left">
          <text @click="showGroup" class="group-btn iconfont icon-18gengduo"></text>
        </view>
        AI助手
      </h-head>
    </view>

    <view class="s-body chat-con">
      <view>
        <scroll-view class="maxh" :scroll-y="true" :scroll-top="scrollY">
          <example-list v-if="chatList.length === 0 && tempMsg == null" @send="sampleSend"></example-list>
          <chat-list :temp-msg="tempMsg" :list="chatList" type="chat" @refsh="refsh"></chat-list>
        </scroll-view>
      </view>


      <view>
        <view>
          <textarea auto-height @input="changeInput" @keyup.enter="send" v-model="text" placeholder="请输入要问的问题吧" maxlength="9000"></textarea>
        </view>
        <view @click="send">
          <text class="iconfont icon-fasong"></text>
        </view>
      </view>

      <u-popup v-model="cateParam.visible" mode="left" border-radius="14" width="400rpx">

        <view class="cate-con">
          <view @click="addCate()">
            <u-icon name="plus-circle" class="mr-10" color="#101012" size="28"></u-icon>
            创建新会话
          </view>

          <view>
            <view v-for="x in groupList" :key="x.id" @click="changeGroup(x)" :class="{active: groupId === x.id}">
              <view>
                <text class="iconfont icon-xiaoxi1"></text>
              </view>
              <view>
                {{ x.name }}
              </view>
              <view>
                <text class="iconfont icon-cuowu1" @click="removeCate(x)"></text>
              </view>
            </view>
          </view>
        </view>
      </u-popup>

      <u-modal v-model="removeCateParam.visible" content="确定删除么？" title="提示" :show-cancel-button="true" @confirm="sureRemoveCate" @cancel="removeCateParam.visible=false"></u-modal>
      <u-modal v-model="addCateParam.visible" title="新增" :show-cancel-button="true" @confirm="sureAddCate" @cancel="addCateParam.visible=false">
        <view class="add-cate-inp">
          <input type="text" v-model="addCateParam.val" placeholder="请输入名称">
        </view>
      </u-modal>
    </view>

    <view class="s-footer">
      <h-footer active="1"></h-footer>
    </view>
  </view>
</template>

<script>

import ExampleList from "../../components/chat/ExampleList";
import ChatList from "../../components/chat/ChatList";
import {changeSiteIdFn} from "../../framework/utils/config";

export default {
  components: {
    ExampleList,
    ChatList
  },
  onShow() {
    this.initGroup()
    this.initChatList()

    this.httpClient.post({
      url: this.APIPath.user.info,
      noCheck: true,
      data: {}
    }).then(res => {
      if(res.code === 200) {
        this.storage.setUserInfo(res.data)
      }
    })
  },
  onLoad(option) {

    if(this.globalConfig.CHANNEL_ID != 2) {
      const siteId = this.utils.getUrlParam('siteId')
      if(siteId) {
        this.globalConfig.changeSiteIdFn(siteId)
      }
    }

    if(this.globalConfig.CHANNEL_ID == 3) {
      const code = this.utils.getUrlParam('code')
      if(code) {
        this.httpClient.post({
          url: this.APIPath.user.wxMpCodeCb,
          noCheck: true,
          data: {
            code
          }
        }).then(res => {
          if(res.code === 200) {
            debugger
          }
        })
      }
    }


  },
  onHide() {
  },
  onUnload() {
  },
  data() {
    return {
      groupId: '',
      sseId: '',
      lock: false,
      text: '',
      scrollY: 99999,
      tempMsg: null,
      chatList: [],
      groupList: [],
      addCateParam: {
        visible: false,
        id: '',
        val: ''
      },
      removeCateParam: {
        id: '',
        visible: false,
      },
      cateParam: {
        active: '',
        visible: false
      }

    };
  },
  methods: {
    sampleSend(t) {
      if(this.lock) {
        return this.utils.toast('请等待上个问题回答完成');
      }
      this.text = t
      this.send()
    },
    showGroup() {
      if(this.lock) {
        return this.utils.toast('请等待问题回答完成');
      }
      this.cateParam.visible = true
    },
    changeGroup(d) {
      this.groupId = d.id
      this.cateParam.visible = false
      this.initChatList()
    },
    refsh(d) {
      if(this.lock) {
        return this.utils.toast('请等待上个问题回答完成');
      }

      this.text = d.messageText
      this.send()
    },
    initGroup() {
      this.httpClient.post({
        url: this.APIPath.chatGroup.list,
        noCheck: true,
        data: {
        }
      }).then(res => {
        if(res.code === 200) {
          this.groupList = res.data
        }
      }, err => {
      })
    },
    addCate(data = {}) {
      this.addCateParam.val = data.name || ''
      this.groupId = data.id || ''
      this.addCateParam.visible = true
    },
    sureAddCate() {
      const d = {
        name: this.addCateParam.val
      }
      if(this.groupId) {
        d.id = this.groupId
      }

      this.httpClient.post({
        url: this.APIPath.chatGroup[this.groupId ? 'edit' : 'add'],
        data: d
      }).then(res => {
        this.initGroup()
        this.utils.toast('操作成功')
      }, err => {
      })
    },
    sureRemoveCate() {
      this.httpClient.post({
        url: this.APIPath.chatGroup.del,
        data: {
          id: this.removeCateParam.id
        }
      }).then(res => {
        this.initGroup()
        if(this.groupId === this.removeCateParam.id) {
          this.groupId = ''
          this.initChatList()
        }

        this.utils.toast('操作成功')
      }, err => {
      })
    },
    removeCate(d) {
      this.removeCateParam.id = d.id
      this.removeCateParam.visible = true
    },
    initChatList() {
      this.httpClient.post({
        url: this.APIPath.chat.list,
        noCheck: true,
        data: {
          groupId: this.groupId
        }
      }).then(res => {
        if(res.code === 200) {
          this.tempMsg = null
          this.chatList = res.data
          this.lastScroll()
        }
      }, err => {
      })
    },
    lastScroll(num = 999) {
      this.$nextTick(res => {
        this.scrollY += num
        setTimeout(v => {
          this.scrollY += num
        }, 200)
      })
    },
    changeInput() {
      if(this.text.indexOf('\n') > -1) {
        this.text = this.text.replaceAll('\n', '')
      }
    },
    send() {
      if(this.lock) {
        return this.utils.toast('请等待上个问题回答完成');
      }

      const text = this.text
      if(!text) {
        return this.utils.toast('请输入内容');
      }

      this.lock = true

      this.utils.getSsm(event => {

        this.utils.checkSseData(event.data).then(res => {
          if(res.event === "sseId") {
            this.sseId = res.id

            this.text = ''
            this.tempMsg = {
              my: text,
              ai: ''
            }

            this.httpClient.post({
              url: this.APIPath.chat.sendMsg,
              noLoading: true,
              data: {
                id: res.id,
                message: text,
                groupId: this.groupId
              }
            }).then(res => {

            }, err => {
              if(event && event.target && event.target.close) {
                event.target.close();
              }
            })
            return;
          }else if (res.event === "message") {
            this.tempMsg.ai = res.data
            this.lastScroll(100)
          }else if(res.event === "end") {
            this.lock = false
            if(event && event.target && event.target.close) {
              event.target.close();
            }
            this.initChatList()
          }
        }, err => {
          this.lock = false
          if(event && event.target && event.target.close) {
            event.target.close();
          }
        })
      }, event => {
        this.lock = false
        if(event && event.target && event.target.close) {
          event.target.close();
        }
      })
    }

  },
};
</script>

